<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>

	<%-- 静态包含 base标签、css样式、jQuery文件 --%>
	<%@ include file="/pages/common/head.jsp"%>

</head>
<body>
	<div id="header">
			<img class="logo_img" alt="" src="static/img/logo.jpg" >
			<span class="wel_word">购物车</span>

		<div>
		    <span>欢迎<span class="um_span">${sessionScope.user.name}</span>光临</span>
		    <a href="client/orderServlet?action=showOrder">我的订单</a>
		    <a href="userServlet?action=logout">退出登录</a>&nbsp;&nbsp;
		    <a href="index.jsp">返回</a>
		</div>
		
		<script type="text/javascript">
			$(function() {
				// 给删除绑定单击事件
				$("a.removeItem").click(function () {
					return confirm("您确定要删除【" + $(this).parent().parent().find("td:first").text() +"】吗?")
				});
				
				// 给清空购物车绑定单击事件
				$("#clearCart").click(function () {
					return confirm("您确定要清空购物车吗?");
				})
				
				// 给结账绑定单击事件
				$("#createCartOrder").click(function () {
					// 发ajax请求，结账
					var flag = true;
					$.ajax({
						url: "http://localhost:8080/ShoppingCart/client/orderServlet",
						data: "action=checkStock",
						async: false,
						dataType: "json",
						success: function(data) {
							if (data != null) {
								flag = false;
								alert(data.outStockProduct + " 库存不足哦，减少购买数量试试吧！");
							}
						}
					});
					return flag;
				})
				
				// 给输入框绑定 onchange内容发生改变事件
				$(".updateCount").change(function () {
					var name = $(this).parent().parent().find("td:first").text();
					var productId = $(this).attr("productId");
					var quantity = this.value;
					var pattern = /^[1-9]\d*$/;
					if (pattern.test(quantity) == false) {
						alert("请输入正整数！");
						location.reload();
					} else {
						if ( confirm("您确定要将【" + name + "】的数量修改为：" + quantity + " 吗?") ) {
							location.href = "http://localhost:8080/ShoppingCart/cartServlet?action=changeQuantity&quantity="+quantity+"&productId="+productId;
						} else {
							this.value = this.defaultValue;
						}
					}
				});
			});
		</script>

	</div>
	
	<div id="main">
	
		<table>
			<tr>
				<td>商品名称</td>
				<td>数量</td>
				<td>单价</td>
				<td>金额</td>
				<td>操作</td>
			</tr>		
			<c:if test="${empty sessionScope.cart.items}">
				<%--如果购物车空的情况--%>
				<tr>
					<td colspan="5"><a href="index.jsp">您的购物车为空哦！快跟小伙伴们去浏览商品吧！！！</a> </td>
				</tr>
			</c:if>
			<c:if test="${not empty sessionScope.cart.items}">
				<%--如果购物车非空的情况--%>
				<c:forEach items="${cart.items}" var="cartItemView">
					<tr>
						<td>${cartItemView.productName}</td>
						<td>
							<input class="updateCount" style="width: 80px;"
								   productId="${cartItemView.productId}"
								   type="text" value="${cartItemView.quantity}" iValue="${cartItemView.quantity}">
						</td>
						<td>${cartItemView.price}</td>
						<td>${cartItemView.price * cartItemView.quantity}</td>
						<td><a class="removeItem" 
						       href="cartServlet?action=removeItem&productId=${cartItemView.productId}">删除</a>
						</td>
					</tr>
				</c:forEach>
			</c:if>
		</table>
		<%--如果购物车非空才输出页面的内容--%>
		<c:if test="${not empty sessionScope.cart.items}">
			<div class="cart_info">
				<span class="cart_span">购物车中共有<span class="p_count">${sessionScope.cart.totalCount}</span>件商品</span>
				<span class="cart_span">总金额<span class="p_price">${sessionScope.cart.totalPrice}</span>元</span>
				<span class="cart_span"><a id="clearCart" href="cartServlet?action=removeAll">清空购物车</a></span>
				<span class="cart_span"><a id="createCartOrder" href="client/orderServlet?action=createCartOrder">去结账</a></span>
			</div>
		</c:if>
	
	</div>

	<%--静态包含页脚内容--%>
	<%@include file="/pages/common/footer.jsp"%>

</body>
</html>